<script setup lang="ts">
import VirtualizeTable from '@/common/lty-table/VirtualizeTable.vue'
import { useOperate } from '@/stores/operate'
import { useDictStore } from '@/stores/Dict'

const template = {
  title: '',
  content: '',
  isScroll: true
}
const router = useRouter()
const operateStore = useOperate()
const dictStore = useDictStore()
const typeObj = {
  1: '查询',
  2: '新增',
  3: '编辑',
  4: '删除',
  5: '批量删除'
}
const govOrg = dictStore.$state.govOrg // 行政组织管理
const table_config = ref({
  thead: [
    {
      label: '标题',
      prop: 'title'
    },
    {
      label: '发布单位',
      prop: 'govOrgName'
    },
    {
      label: '发布人',
      prop: 'createUserName'
    },
    {
      label: '发布时间',
      prop: 'createDtm'
    }
  ],
  filter_Config: {
    govOrgId: '',
    startTime: '',
    endTime: ''
  },
  SpecialField: [],
  paging: true,
  num: false,
  select: true,
  expend: false,
  isoperate: true,
  operatewidth: '220px',
  ispagination: true,
  methodName: 'getNoticeList'
})
const multiples = ref([]) // 表格多选内容
const datePicker = ref([]) // 筛选条件 -- 时间
const govOrgId = ref() // 筛选条件 -- 组织id

// 跳转到操作页 1查询 2新增 3编辑 4删除 5批量删除
const operate = (type: Number, data?: any) => {
  operateStore.setType(type)
  operateStore.setName('notice')
  operateStore.setTypeObj(typeObj)
  if (type === 4) {
    operateStore.setForm({ id: data.id })
  } else if (type === 5) {
    operateStore.setForm({ ids: multiples })
  } else {
    operateStore.setForm(Object.assign({}, template, data))
  }
  router.push('/operate')
}

// 获取多选框选中内容
const getMultiples = (data: any) => {
  multiples.value = data.map((item: any) => {
    return item.id
  })
}

watch([() => datePicker.value, () => govOrgId.value], (value) => {
  const date = value[0] || []
  const Ids = value[1] || []
  table_config.value.filter_Config = {
    startTime: date[0] || '',
    endTime: date[1] || '',
    govOrgId: Ids[Ids.length - 1]
  }
})

onMounted(() => {})
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="mb-[20px] flex items-center justify-between">
      <div>
        <el-button type="success" class="button_addTo" @click="operate(2, {})">
          <svg-icon
            name="icon-system-button-create"
            width="16px"
            height="16px"
            class="mr-3"
          />
          <span>发布通知</span>
        </el-button>
        <el-button
          type="danger"
          class="button_delete"
          @click="operate(5, { ids: multiples })"
          >批量删除</el-button
        >
      </div>
      <div class="flex items-center text-xs text-[--auxiliary]">
        <!--筛选列表条件-->
        <div class="ml-5 mr-3 whitespace-nowrap">单位</div>
        <el-cascader
          class="select_darkColor"
          v-model="govOrgId"
          :options="govOrg"
          :props="{
            children: 'childrenList',
            label: 'name',
            value: 'id'
          }"
          :show-all-levels="false"
          clearable
        />
        <div class="ml-5 mr-3 whitespace-nowrap">筛选时间</div>
        <el-date-picker
          class="input_darkColor"
          v-model="datePicker"
          type="daterange"
          format="YYYY-MM-DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
    </div>
    <div class="flex-1">
      <VirtualizeTable
        :table_config="table_config"
        @selectChange="getMultiples"
      >
        <template #operate="{ row }">
          <div class="flex justify-center px-[28px]">
            <svg-icon
              name="icon-system-button-see"
              width="32px"
              height="32px"
              class="mr-[20px] cursor-pointer rounded-full border border-[#5E9DB4] p-1.5"
              @click="operate(1, row)"
            />
            <svg-icon
              name="icon-system-button-bianji"
              width="32px"
              height="32px"
              class="mr-[20px] cursor-pointer rounded-full border border-[#5E9DB4] p-1.5"
              @click="operate(3, row)"
            />
            <svg-icon
              name="icon-system-button-shanchu"
              width="32px"
              height="32px"
              class="cursor-pointer rounded-full border border-[#5E9DB4] p-1.5"
              @click="operate(4, row)"
            />
          </div>
        </template>
      </VirtualizeTable>
    </div>
  </div>
</template>

<style scoped>
.back {
  background: transparent;
}

.down_btn {
  background: transparent;
  color: #5e9db4;
  padding: 5px 18px;
  text-align: center;
  cursor: pointer;
}

.down_btn:hover {
  background-color: rgba(45, 242, 255, 0.06);
  font-family: MicrosoftYaHei, MicrosoftYaHei;
  font-weight: bold;
  color: #2df2ff;
}
</style>
